<template>
  <div id="bg">
    <div class="login-content">
      <div class="login-form">
      <h1>学生管理系统 | 登录</h1>
        <el-form
          :model="loginInfo"
          status-icon
          ref="loginInfo"
          class="demo-loginInfo"
        >
          <el-form-item
            prop="username"
            :rules="[{ required: true, message: '用户名不能为空' }]"
          >
            <el-input
              v-model="loginInfo.username"
              @focus="isUserChecked = true"
              @blur="aaa"
            ></el-input>
            <div :class="isUserChecked == true ? 'checked' : 'username'">
              用户名
            </div>
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="[{ required: true, message: '密码不能为空' }]"
            class="input_pass"
          >
            <el-input
              type="password"
              v-model="loginInfo.password"
              autocomplete="off"
              @focus="isPassChecked = true"
              @blur="bbb"
            ></el-input>
            <div :class="isPassChecked ? 'checked' : 'password'">密码</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginInfo')"
              >提交</el-button
            >
            <el-button @click="register">没有账号，去注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style>
#bg {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../login-bg.jpg) no-repeat;
  background-size: cover;
}
.login-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -350px;
  width: 900px;
  height: 700px;
  /* line-height: 700px; */
  background-color: #fff;
  border-radius: 50%;
}
.login-form {
  width: 400px;
  text-align: center;
  /* margin: auto; */
  margin-left: 80px;
  margin-top: 50%;
  transform: translateY(-80%);
}
.login-form h1 {
  margin-bottom: 70px;
}
.input_pass {
  margin-top: 50px;
}
.username,
.password {
  position: absolute;
  top: 0;
  left: 20px;
  pointer-events: none;
  transition: 200ms;
}
.checked {
  position: absolute;
  top: -35px;
  left: 3px;
  font-size: 18px;
  font-weight: 500;
  color: rgb(43, 46, 236);
  transition: 200ms;
}
</style>
<script>
import { getLogin } from "../../api/login.js";
import { setCookie } from "../../network/cookie";
export default {
  name: "Login",
  data() {
    return {
      loginInfo: {
        username: "",
        password: "",
      },
      isUserChecked: false,
      isPassChecked: false,
    };
  },
  methods: {
    aaa() {
      if (this.loginInfo.username == "") {
        this.isUserChecked = false;
      }
    },
    bbb() {
      if (this.loginInfo.password == "") {
        this.isPassChecked = false;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          getLogin(this.loginInfo).then((res) => {
            console.log(res);
            if (res.data.success === true) {
              this.$message({
                message: "操作" + res.data.msg,
                type: "success",
              });
              setCookie("token", res.data.data, 7);
              console.log(res.data.data);
              this.$router.push("/User");
            } else {
              this.$message.error(res.data.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    register() {
      this.$router.push("/Register");
    },
  },
};
</script>
